<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui_v2/css/layui.css" media="all"/>
    <style type="text/css">

        /*设置头像单元格大小*/
        .layui-table-cell {
            height: 50px;
            line-height: 55px;
            text-align: center;
        }

        /* 分页向右
         .layui-table-page {
             float: right;
         }*/
    </style>
</head>
<body>
<!-- 表格 -->
<table id="emp_table" class="layui-table" lay-filter="emp_table"></table>

<div id="re_div" style="display:none;text-align: center;">

    <div style="text-align: center;width: 400px;height: 200px;margin-top: 20px;">
        <form id="re_emp_form" class="layui-form"
              action="${pageContext.request.contextPath}/empAction_restoreEmp.action"
              method="post" lay-filter="re_emp_form">

            <input id="id_input" type="hidden" name="id" value="">

            <div class="layui-form-item">
                <label class="layui-form-label">员工姓名:</label>
                <div class="layui-input-inline">
                    <input id="truename_input" type="text" name="truename" value="" readonly="readonly"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">所在部门:</label>
                <div class="layui-input-inline">
                    <select id="dept_select" name="dept.id" lay-filter="dept_id_select" lay-search="">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <button class="layui-btn" style="margin-left: 150px;" lay-submit="">恢复员工</button>
                </div>
            </div>
        </form>
    </div>

</div>

<script src="${pageContext.request.contextPath}/layui/layui_v2/layui.js"></script>
<script>
    layui.use(['table', 'jquery', 'layer', 'form'], function () {
        var $ = layui.jquery,
            table = layui.table,
            layer = layui.layer,
            form = layui.form;


        //设置表头
        var clos = [[{
            field: "id", title: '员工编号', width: 100, sort: true, align: 'center'
        }, {
            field: 'truename', title: '员工真实姓名', width: 170, align: 'center'
        }, {
            field: 'dept', title: '所在部门', width: 170, align: 'center', templet: '#deptTel'
        }, {
            field: 'loginname', title: '登录名', width: 170, align: 'center'
        }, {
            field: 'psw', title: '登录密码', width: 170, align: 'center'
        }, {
            field: 'sex', title: '员工性别', width: 170, align: 'center'
        }, {
            field: 'img',
            title: '员工头像',
            width: 170,
            align: 'center',
            templet: '#imgtmplet'
        }, {
            field: 'flag', title: '员工类别', width: 170, align: 'center', templet: '#flagTel'
        }, {
            field: 'admin', title: '权限级别', width: 170, align: 'center', templet: '#adminTel'
        }, {
            title: '操作', width: 230, toolbar: '#bardo', align: 'center'
        }]];

        //table 数据接口
        var tableUrl = '${pageContext.request.contextPath}/empAction_pageQuery.action?is=0';

        //方法级别渲染表格
        var tableIns = table.render({
            elem: '#emp_table'
            , id: 'emp_table_info'
            , height: 'auto'
            , cols: clos
            , url: tableUrl
            , page: true
            , limits: [7, 14, 20]
            , limit: 7
        });

        $.post("${pageContext.request.contextPath}/deptAction_findAll.action", function (data) {

            var options = "";
            for (var i = 0; i < data.length; i++) {
                //拼字符串时千万不能出错，尤其是value不能有空格
                options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
            }
            $("#dept_select").append(options);
            form.render();
        });

        var index;//layer 弹出层索引

        //监听工具条
        table.on('tool(emp_table)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'restore') { //恢复员工
//                obj.del(); //删除对应行（tr）的DOM结构
//                layer.msg("恢复员工");

                //赋值
                $("#truename_input").val(data.truename);
                $("#id_input").val(data.id);

                index = layer.open({
                    type: 1,
                    title: '恢复员工',
                    area: ['450px', '300px'],
                    fixed: false,
                    scrollbar: false,
                    resize: false,
                    content: $("#re_div") //捕获页，从页面捕获
                });

            }
        });


        //监听提交
        form.on('submit(re_emp_form)', function (data) {

            $.post("${pageContext.request.contextPath}/empAction_restoreEmp.action",
                $("#re_emp_form").serialize(),
                function (data) {

                    if (data) {
                        layer.msg("恢复成功");
                    } else {
                        layer.msg("恢复异常");
                    }
                    tableIns.reload();
                    layer.close(index);
                });

            return false;
        });

    });


</script>

<script type="text/html" id="imgtmplet">
    {{#  if(d.img !== ''){ }}
    <div><img src="{{d.img}}" class="layui-circle"
              style=" width: 50px;height: 50px;border: 1px solid plum;padding: 2px;"/></div>;
    {{#  } else { }}
    <div><img src="images/face.jpg" class="layui-circle"
              style=" width: 50px;height: 50px;border: 1px solid hotpink;padding: 2px;"/></div>;
    {{#  } }}
</script>

<script type="text/html" id="flagTel">
    {{#  if(d.flag === 0 ){ }}
    <span style="color: #000;">普工</span>
    {{#  } else { }}
    <span style="color: #F581B1;">部门主管</span>
    {{#  } }}
</script>
<script type="text/html" id="adminTel">
    {{#  if(d.admin === 0 ){ }}
    <span style="color: #000;">普通操作者</span>
    {{#  } else { }}
    <span style="color: #F581B1;">部门主管</span>
    {{#  } }}
</script>
<script type="text/html" id="deptTel">
    {{#  if(d.dept === null){ }}
    <span style="color: #f5120c;">待议</span>
    {{#  } else { }}
    <span style="color: #000;">{{d.dept.name}}</span>
    {{#  } }}
</script>

<script type="text/html" id="bardo">
    <div style="margin-top: 15px;"><a class="layui-btn layui-btn-mini" lay-event="restore"><i class="layui-icon">&#xe642;</i>恢复员工</a>
    </div>
</script>

</body>
</html>
